<template>
  <div>
    <!-- <van-cell is-link @click="showPopup">展示弹出层</van-cell> -->
<van-popup  round v-model="show" position="top" :style="{ height: '70%' }" >
  
<div class="text">
  <div>

    <div class="text-jl">距离</div>

    <div class="bujutx" >
      <div class="itme" :class="{actived:datac.distance =='desc'}"  @click="sctiond('desc')" >由远到近</div>
      <div class="itme" :class="{actived:datac.distance =='asc'}"  @click="sctiond('asc')">由近到远</div>
    </div>

      
    <div class="text-jl" >评分</div>

    <div class="bujutx" >
      <div class="itme "  :class="{actived:datac.scoreRange=='4-5'}" @click="score('4-5')">4分-5分</div>
      <div class="itme"   :class="{actived:datac.scoreRange=='3-4'}" @click="score('3-4')">3分-4分</div>
    </div>
  <div class="bujutx" >
      <div class="itme "  @click="score('2-3')"  :class="{actived:datac.scoreRange=='2-3'}" >3分-2分</div>
      <div class="itme" :class="{actived:datac.scoreRange=='1-2'}" @click="score('1-2')">2分-1分</div>
    </div>
      <div class="itme  casan"  :class="{actived:datac.scoreRange=='0-1'}" @click="score('0-1')">1分以下</div>
 
  </div>
  <div class="bujutx">
  <van-goods-action-button
    type="warning"
    text="确认"
    @click="onconfirm"
  />
    <van-goods-action-button
    type="danger"
    text="清除"
    @click="onremove"
  />
  </div>
</div>


</van-popup>
  </div>
</template>

<script>
export default {
name:'ScreEning',
  data() {
    return {
      show: false,
     
      datac:{
         // 控制距离
      distance:'',
      //控制分数
      scoreRange :''
        }
    };
  },

  methods: {
    
    showPopup() {
      this.show = true;
    },
  // 清除
    onremove(){
      
      this.datac.distance=''
      this.datac.scoreRange=''
      
    },
    //确认
    onconfirm(){
      if(this.datac.distance){
 this.$parent.dataa.distance=this.datac.distance
      }
      
      if(this.datac.scoreRange){
        this.$parent.dataa.scoreRange=this.datac.scoreRange
      }
     this.$parent.logdata()
      console.log(this.$parent);
      console.log(this.datac);
      this.show=false
    },
    // 筛选距离的数据
    sctiond(distance){

        this.datac.distance=distance
    },
    score(scoreRange){
      this.datac.scoreRange=scoreRange
    }
  },
}
</script>

<style  lang= "less" scoped> 
.actived{
  color: red;
}
.itme{
  width: 170px;
  height: 35px;
   text-align: center;
    line-height: 35px;
    font-size: 18px;
    border-radius: 4%;
    /* background: #c29b9b; */
    background: #F9F8F8;
    margin-bottom: 15px;

    /* width:22px;
    height: 18px;
    border-radius: 0.10667rem;
    font-size: 18px;
   

    margin-bottom: 0.26667rem; */
}
.bujutx{
  display: flex;
justify-content: space-around;
}
.text-jl{
  padding: 0 10px;
  font-size: 25px;
  font-weight: 800;
  margin-bottom: 15px;
}
.casan{
  margin-left: 7px;
}
.text{
  width: 374px;
  height: 700px;
  /* padding: 0 10px; */
}

</style>